import clsm from "@/lib/utils/clsm";

type SwitchProps = {
  value: boolean;
  onChange: (value: boolean) => void;
};

export default function Switch(props: SwitchProps) {
  const { value, onChange } = props;

  return (
    <div
      className={clsm(
        "relative inline-flex h-6 w-12 cursor-pointer rounded-3xl bg-white transition-colors duration-300",
        value && "bg-[#25cb55]",
      )}
      onClick={() => onChange(!value)}
      role="switch"
    >
      <span
        className={clsm(
          "absolute left-0.5 top-0.5 size-5 rounded-full bg-[#ddd] transition-transform duration-300",
          value && "translate-x-6",
        )}
      ></span>
    </div>
  );
}
